<template>
  <div>
    <el-page-header content="所有订单查询" @back="goBack">
    </el-page-header>
    <el-table
          :data="orders"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="o_serial"
            label="订单编号"
            width="200">
          </el-table-column>
          <el-table-column
            prop="u_nickname"
            label="下单用户"
            width="100">
          </el-table-column>
          <el-table-column
            prop="p_name"
            label="下单商品"
            width="100">
          </el-table-column>
          <!--  -->
          <el-table-column
            prop="o_date"
            label="下单日期"
            width="200">
          </el-table-column>
          <el-table-column
            prop="o_money"
            label="下单金额(万元)"
            width="100">
          </el-table-column>
          <el-table-column
            prop="o_address"
            label="收货地址"
            width="100">
          </el-table-column>
          <el-table-column
            prop="o_comment"
            label="备注"
            width="100">
          </el-table-column>

          <el-table-column
            prop="o_status"
            label="订单状态"
            width="100">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
          </el-pagination>
        </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        orders:[],
        currentsize:1,
        pagesize:3,
        // 分页
        currentPage: 1,
        totalPage:0,
        pagesize:3,
        // tab选项卡
        activeName: 'first'
    }
  },
  methods:{
    init(){
      let obj = {
        currentsize:this.currentPage, 
        pagesize:this.pagesize
      }
      this.$ajax({
        url:"after/orderAll",
        method:"get",
        params:obj
      }).then(resp=>{
        if(resp.data.status === 1){
          this.totalPage = resp.data.totalPage;

          this.orders = resp.data.message;
        }
      })
    },
    // 数据表格
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'warning-row';
      } else{
        return 'success-row';
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pagesize = val
      this.init();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
      // console.log(`当前页: ${val}`);
    },
    goBack() {
      this.$router.push("/")
    },
    // tab选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  created(){
    this.init();
  }
}
</script>

<style scoped>
/* 数据表格 */
.el-table .warning-row {
    background: oldlace;
  }
.el-table .success-row {
  background: #f0f9eb;
}
</style>